<!--  -->
<template>
  <div class='customer'>
    <!--        头部-->
    <head-top></head-top>
    <div style="width: 100%;height: 50px;"></div>
    <div class="vantTabs">
      <van-tabs sticky v-model="active" title-active-color="#fbef1a" @click="clickTitle">
        <van-tab v-if="roleFlag" title="帮助中心" name="0">
          <div class="taskcon">
            <ul class="helpUl">
              <li>
                <router-link tag="div" to="/helpDetail" class="helpLis">
                  <div>做单问题</div>
                  <span class="iconfont icon-youjiantou"></span>
                </router-link>
              </li>
              <li>
                <router-link tag="div" to="/helpDetail" class="helpLis">
                  <div>拖款问题</div>
                  <span class="iconfont icon-youjiantou"></span>
                </router-link>
              </li>
              <li>
                <router-link tag="div" to="/helpDetail" class="helpLis">
                  <div>如何接买家秀</div>
                  <span class="iconfont icon-youjiantou"></span>
                </router-link>
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab v-if="roleFlag" title="提交工单" name="1">
          <div class="workOrder">
            <div class="textarea">
              <p style="color:#a2a8ae;font-size:14px;padding-bottom: 10px;">问题内容</p>
              <textarea placeholder="点击输入内容" v-model="form.woContent"> </textarea>
              <div class="chooseType">
                <div>选择类型</div>
                <select v-model="form.woType">
                  <option v-for="item in workTypeList" :value="item.itemValue">{{ item.itemText }}</option>
                </select>
              </div>
              <div class="item itemImg">
                <div class="titleLeft">问题图片</div>
                <div class="right uploadimg">
                  <div class="imgs">
                    <div class="uploadBut">
                      上传
                      <input type="file" ref="upFile" placeholder="的" @change="File()"></input>
                    </div>
                    <div class="preview" ref="preview">
                      <div class="photo" v-for="(a,b) in list" :key="b">
                        <img :src="a"/>
                        <span class="iconfont icon-quxiao" @click="cancelImg(b)"></span>
                      </div>
                      <div v-if="previewFlag" class="bg"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="resetBut">
              <div class="button" @click="submit">提交</div>
            </div>
          </div>
        </van-tab>
        <!--        :badge="messageUnRead"-->
        <van-tab title="我的工单" name="2">
          <div class="myOrder">
            <ul class="myUl">
              <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                <li v-for="item in myWorkOrderList">
                  <router-link tag="div" :to="{path:'/myWorkDetail',query:{orderNumber:item.woNumber}}"
                               class="myOrderLis">
                    <div class="left">
                      <span class="tip" v-if="item.userNoReadNum != null">{{ item.userNoReadNum }}</span>
                      <p>{{ item.woNumber }}</p>
                      <p style="font-size: 10px ;color:green">状态：{{ item.woStatus }}</p>
                      <div>{{ item.woLastContent }}</div>
                    </div>
                    <div class="right">
                      <span>{{ item.woLastTime }}</span>
                      <span class="iconfont icon-youjiantou"></span>
                    </div>
                  </router-link>
                </li>
              </van-pull-refresh>
            </ul>
          </div>
        </van-tab>

      </van-tabs>
    </div>
    <div style="width: 100%;height: 50px;"></div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from ‘《组件路径》‘;
import headTop from "../../components/base/headTop.vue"
import workOrderApi from "@/api/workOrder"
import {Toast} from "vant";
import comApi from "@/api/comapi";
import tabbar from "../../components/base/tabbar";
import userApi from "@/api/user";

export default {
//import引入的组件需要注入到对象中才能使用
  components: {
    headTop
  },
  data() {

    return {
      active: '0',
      badgeNum: '2',
      Bsieks: '',
      previewFlag: true,
      itemText: '',
      form: {
        woContent: '',
        woUrls: '',
        woType: '1' // 工单类型 1 普通 2 任务申诉
      },
      list: [],
      page: {
        pageNo: 1,
        pageSize: 10,
      },
      myWorkOrderList: [],
      fileType: ['image/png', 'image/jpeg'],
      workTypeList: [],
      taskList: [
        {
          title: '帮助中心',
        },
        {
          title: '提交工单',
        },
        {
          title: '我的工单',
        },
      ],
      messageUnRead: 0,
      roleFlag: true,
      isLoading: false,


    };
  },
//监听属性 类似于data概念
  computed: {},
//监控data中的数据变化
  watch: {},

  created() {
    // this.myInfoLoad()
    this.workTypeListLoad()
    this.getAllUnReadMessage()
    this.active = this.$route.query.num
    if (this.$route.query.num) {
      this.workOrderList()
    }
    var role = window.localStorage.getItem('role')
    if (role == '客服') {
      this.roleFlag = false
      var timer = setInterval(function () {
        workOrderApi.list(this.page).then(res => {
          this.myWorkOrderList = res.data.records
        })
      }, 15000)
      this.$once('hook:beforeDestroy', () => {
        clearInterval(timer)
        timer = null
      })
    }
    this.workOrderList()
  },
  methods: {

    getAllUnReadMessage() {
      workOrderApi.getAllUnReadMessage().then(res => {
        this.messageUnRead = res.data.record.num
      })
    },
    clickTitle(name) {
      window.localStorage.setItem('i', name)
      var timer = setInterval(function () {
        workOrderApi.list(this.page).then(res => {
          this.myWorkOrderList = res.data.records
          var i = window.localStorage.getItem('i')
          if (i == 1 || i == 0) {
            clearInterval(timer)
          }
        })
      }, 15000)
      if (name == 2) {
        this.workOrderList()
      }
      this.$once('hook:beforeDestroy', () => {
        clearInterval(timer)
        timer = null
      })
    },

    workOrderList() {
      workOrderApi.list(this.page).then(res => {
        this.myWorkOrderList = res.data.records
      })
    },
    workTypeListLoad() {
      comApi.getDictList("work_type").then(res => {
        this.workTypeList = res.data.records
      })
    },
    submit() {
      this.form.woUrls = this.list

      if (this.form.woContent.length < 2) {
        Toast('请上传 工单内容');
        return;
      }
      if (this.list.length < 1) {
        Toast('请上传 工单图片');
        return;
      }
      this.form.woUrls = this.list.join()
      workOrderApi.submitWorkOrder(this.form).then(res => {
        Toast(res.message);
        this.previewFlag = false
        this.form.woContent = ''
        this.list = []
        // TODO :记得修改工单类型
        // this.form.woType = ''
      })
    },
    File() {
      if (this.list.length >= 9) {
        this.$toast('最多只能上传9张哦')
        return
      }
      let file = this.$refs.upFile.files[0];
      if (this.fileType.indexOf(file.type) < 0) {
        Toast('请上传 jpg或png 格式图片');
        return false;
      }

      let formData = new FormData();
      formData.append("file", file)
      comApi.fileUpload(formData).then(res => {
        console.log(res.data)
        // TODO：重写这里，这里上传图片应该是多张，存到list中，在提交方法（submit）里，重新覆盖this.form.woUrls的值
        this.list = this.list.concat(res.data)
        this.previewFlag = false
      })
    },
    cancelImg(b) {//取消图片
      this.list.splice(b, '1')
    },
    onRefresh() {
      workOrderApi.list(this.page).then(res => {
        console.log(res)
        this.myWorkOrderList = res.data.records
        this.isLoading = false;
      })
    },
  },

  mounted() {
  },
  beforeCreate() {
  },
  beforeMount() {
  },
  beforeUpdate() {
  },
  updated() {
  },
  beforeDestroy() {

  },
  destroyed() {
  },
  activated() {
  }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.customer {
  width: 100%;
  min-height: 100%;
  background: #f8f8f8;
}

.vantTabs {
  width: 100%;

  /deep/ .van-tabs__line {
    width: 33.33%;
    background: #f8f5be;
  }

  /deep/ .van-sticky {
    width: 100%;
    position: fixed;
    top: 50px;
    left: 0;
    z-index: 10000;
  }

  /deep/ .van-tab__text--ellipsis {
    font-size: 18px;
    font-weight: bold;
  }

  .taskcon {
    width: 100%;

    .helpUl {
      background: #ffffff;
      padding-top: 45px;

      li {
        border-bottom: 1px solid #f3f3f3;

        .helpLis {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px;
        }
      }
    }
  }

  .workOrder {
    width: 100%;
    background: #ffffff;

    .textarea {

      padding: 50px 10px 10px 10px;
      border-bottom: 1px solid #e7e7e7;

      textarea {
        width: 100%;
        height: 150px;

      }

      .chooseType {
        display: flex;
        color: #999cb8;
      }

      .item {
        padding: 10px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #e7e7e7;

        .titleLeft {
          line-height: 30px;
          color: #999cb8;
        }

        .right {
          flex: 1;
          padding-left: 30px;

        }

        .switch {
          display: flex;
          align-items: center;
        }
      }

      .itemImg {
        padding-bottom: 0;
        border: none;

        .uploadimg {
          .uploadBut {
            width: 50px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            padding: 0 20px;
            margin: 0 0 15px 30px;
            background: #f8f5be;
            border-radius: 20px;
            position: relative;
            overflow: hidden;

            input {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 2px;
              left: -10px;
              opacity: 0;
            }

          }
        }

        .preview {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          margin-left: 20px;
          position: relative;

          .photo {
            width: 30%;
            position: relative;

            img {
              width: 100%;
              border: none;
              outline: none;
            }

            span {
              font-size: 24px;
              position: absolute;
              top: 5px;
              right: 5px;
            }
          }


          .bg {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #ffffff;
          }

        }
      }
    }

    .resetBut {
      width: 100%;
      background: white;
      position: fixed;
      left: 0;
      bottom: 0;
      padding-bottom: 10px;

      .button {
        /*color: white;*/
        margin: 0 auto;
        width: 90%;
        border-radius: 30px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: #f8f5be;
      }

    }
  }

  .myOrder {
    width: 100%;
    background: #ffffff;

    .myUl {
      padding-top: 50px;

      /deep/ .van-pull-refresh {
        overflow: visible;
      }

      /deep/ .van-pull-refresh__track {
        z-index: 1;
      }

      /deep/ .van-pull-refresh__head {
        z-index: 1;
      }

      li {
        background: #ffffff;

        .myOrderLis {
          font-size: 12px;
          padding: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .left {
            font-size: 14px;
            position: relative;

            .tip {
              width: 18px;
              height: 18px;
              text-align: center;
              line-height: 18px;
              border-radius: 50%;
              background: red;
              position: absolute;
              top: 0px;
              right: -20px;
              color: white;
              font-size: 12px;
            }

            div {
              color: #9a9a9a;
              font-size: 12px;
            }
          }

          .right {
            display: flex;
            align-items: center;

            span {
              color: #9a9a9a;
            }
          }
        }
      }

    }
  }
}
</style>
